<template>
  <!-- 试卷相关信息 -->
  <div class="create-exam-info">
    <!-- 试卷名 -->
    <div>
      <span>试卷名:</span>
      <n-input type="text" v-model:value="props.examData.examTitle" size="large" placeholder="请输入试卷名" class="exam-name" maxlength="50"
        show-count clearable />
    </div>

    <!-- 考试类型 -->
    <n-radio-group v-model:value="props.examData.examType" class="exam-type">
      <span>考试类型：</span>
      <n-radio v-for="type in examTypeOption" :key="type" :value="type">
        {{ type }}
      </n-radio>
    </n-radio-group>

    <!-- 开始时间 -->
    <div class="xz-date">
      <span>开始时间:</span>
      <n-date-picker v-model:value="props.examData.starTime" type="datetime" default-time="00:00:00" :is-date-disabled="starDisselect"
        clearable />
    </div>

    <!-- 结束时间 -->
    <div class="xz-date">
      <span>截止时间:</span>
      <n-date-picker @blur="loseFocus()" :disabled="disabled" v-model:value="props.examData.outTime" default-time="23:59:59" type="datetime"
        :is-date-disabled="outDisselect" clearable />
    </div>

    <!-- 限时间 :actions="['confirm']"只要确认按钮 -->
    <div class="xz-date" v-if="props.examData.examType == '考试'">
      <span>考试限时:</span>
      <n-time-picker v-model:value="props.examData.astrictTime" :actions="['confirm']" default-time="20:00:00" />
    </div>
  </div>

</template>

<script setup>
import { computed, ref } from "vue";
//获取父组件数据
const props = defineProps(['examData'])
      
//考试类型选项
const examTypeOption = ref(["练习", "考试"]);

//禁止选择时间 --如果开始时间是空的就禁止选择截止时间
const disabled = computed(() => {
  return props.examData.starTime == null ? true : false;
});
// 考试开始 和考试截至时间只能是当前时间之后的时间
function starDisselect(ts) {
  return ts < Date.now() - 86400000;
}
//考试结束时间，要比当前时间大
function outDisselect(ts) {
  return ts < props.examData.starTime;
}
// ----------------------------------------------
// 失去焦点 可以删除
function loseFocus(){
  // 失去焦点向父组件发射数据
  // 时间处理
  // exanInfo.value.starTime =  timeUtils.timestampToDate(starTime.value)
  // exanInfo.value.outTime = timeUtils.timestampToDate(outTime.value)
  // exanInfo.value.astrictTime =timeUtils.timestampToDate(time.value,"ms")
}

</script>

<style scoped>
/* 考试信息 */
.create-exam-info {
  padding: 20px;
  border: 1px rgb(149, 108, 79, 0.2) solid;
  border-radius: 10px;
  margin: 15px;
  display: flex;
  flex-direction: column;
}

/* 试卷名输入框 */
.exam-name {
  width: 60%;
  min-width: 300px;
}
/* 考试类型 */
.exam-type {
  margin-top: 10px;
}

/* 开展时间和结束时间*/
.xz-date {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* 文本距离右边输入框的距离 */
.create-exam-info span {
  margin-right: 10px;
}
</style>